<template>
  <div>
    <div class="mark">播放界面---id----{{ id }}</div>
    <!--  信息头像-->
    <div class="info">
      <img :src="imgUrl" alt="">
      <div class="name">{{ name }}</div>
    </div>

    <!--    歌曲列表-->
    <!-- 歌曲列表 -->
    <div class="content">
      <div class="desc">歌曲列表</div>
    </div>
    <!--    2.热歌列表-->
        <MusicList :list="list">
          <template #code="obj">
            <div class="code">
              {{ obj.index + 1 }}
            </div>
          </template>
        </MusicList>
<!--    <div class='list' v-for="(item, index) in list" :key="item.id">-->
<!--      <div class="code">{{ index + 1 }}</div>-->
<!--      <div class="list-item">-->
<!--        <div class="left">-->
<!--          <div class="subtitle">{{ item.name }} <span>{{ item.alia[0] }}</span></div>-->
<!--          <div class="author">-->
<!--                    <span v-for="ele in item.ar" :key="ele.id" class="ele">-->
<!--                        {{ ele.name }}-->
<!--                    </span>-->
<!--            - {{ item.al.name }}-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="right">-->
<!--          <img src="@/assets/images/play.png" alt=""/>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
  </div>
</template>
<script>
import MusicList from '@/components/MusicList.vue'

export default {
  props: ['id'],
  components: {
    MusicList
  },
  data () {
    return {
      name: '', //名称
      imgUrl: '',//图片'
      list: [] //歌曲列表
    }
  }
  ,
  //生命周期-------
  created () {
    this.musicPlaylist()
  },
  methods: {
    async musicPlaylist () {
      let res = await this.$api.musicPlaylist()
      console.log('歌曲信息', res.data)
      this.name = res.data.playlist.name
      this.imgUrl = res.data.playlist.coverImgUrl
      this.list = res.data.playlist.tracks
    }
  }
}
</script>


<style scoped lang="less">
.info {
  padding: .3rem;
  background: #eee;
  display: flex;

  img {
    width: 2.5rem;
  }

  .name {
    flex: 1;
    padding-left: .2rem;
  }
}

.content {

  .desc {
    color: #888;
    font-size: 12px;
    padding: .1rem;
    background: #dddddd;

  }
}

//.list {
//  display: flex;
//
//  .code {
//    width: .9rem;
//    text-align: center;
//    display: flex;
//    align-items: center;
//    justify-content: center;
//    font-size: 16px;
//  }
//
//  .code-red {
//    color: #df3436;
//  }
//}
//
////最新音乐
//.list-item {
//  border-bottom: 1px solid #eee;
//  font-size: 17px;
//  padding-top: 6px;
//  padding-bottom: 6px;
//  display: flex;
//  flex: 1;
//
//  .code {
//    width: .9rem;
//    text-align: center;
//    display: flex;
//    align-items: center;
//    justify-content: center;
//  }
//
//  .left {
//    flex: 1;
//    overflow: hidden;
//    text-overflow: ellipsis;
//    white-space: nowrap;
//    word-break: normal;
//  }
//
//  .right {
//    width: .9rem;
//  }
//
//  .subtitle {
//    font-size: 17px;
//    overflow: hidden;
//    text-overflow: ellipsis;
//    white-space: nowrap;
//    word-break: normal;
//
//    span {
//      //font-size: 12px;
//      color: #888;
//    }
//
//
//    .subtitle {
//      font-size: 17px;
//
//      span {
//        font-size: 12px;
//        color: #888;
//      }
//    }
//  }
//
//  .author {
//    margin-top: 4px;
//    font-size: 14px;
//    color: #888;
//    overflow: hidden;
//    text-overflow: ellipsis;
//    white-space: nowrap;
//    word-break: normal;
//
//    .ele {
//      &::after {
//        content: '/';
//      }
//    }
//
//    .ele:last-child {
//      &::after {
//        content: '';
//      }
//    }
//  }
//}
</style>
